<template>
    <div class="container">
      <h1>请选择您要进入的界面</h1>
      <button class="btn" @mouseover="startShake($event)" @mouseout="stopShake($event)">培训管理</button>
      <button class="btn" @mouseover="startShake($event)" @mouseout="stopShake($event)">考核授权</button>
    </div>
  </template>
  
  <script>
  export default {
    methods: {
      startShake(event) {
        // 添加抖动类到目标元素上
        event.target.classList.add('shake');
      },
      stopShake(event) {
        // 移除抖动类从目标元素上
        event.target.classList.remove('shake');
      }
    }
  }
  </script>
  
  <style scoped>
  .container {
    background-color: #ffffff; /* 修改背景颜色为白色 */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 调整阴影效果 */
    max-width: 900px;
    margin: 90px auto; /* 增加上下边距 */
    padding: 100px;
    text-align: center; /* 文本居中 */
  }
  
  h1 {
    color: #333; /* 标题颜色保持不变 */
    font-weight: bold;
    margin-bottom: 30px; /* 增加标题底部间距 */
  }
  
  .btn {
    background-color: #6CFFDE; /* 修改按钮背景颜色 */
    border: none;
    border-radius: 4px;
    color: rgb(0, 0, 0);
    cursor: pointer;
    font-size: 18px; /* 增加字体大小 */
    margin: 40px;
    padding: 60px 50px; /* 增加按钮内边距 */
    transition: background-color 0.3s ease;
    outline: none; /* 移除点击时的轮廓线 */
  }
  
  /* 抖动效果的CSS关键帧动画 */
  @keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }
  
  /* 添加抖动类时的样式 */
  .shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  }
  </style>
  